'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';

import GridView from '../../../../core/component/comp.grid-view';
import Util from "../../../../core/utils/util";
import WinPanel from "../../../../core/component/comp.win-panel"

import Color from '../../../../core/constant/color';

class MainYaoYueGuangChangScene extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "邀约广场",
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {
            itemsPerRow: 3,
        }
    }

    componentDidMount() {

    }

    genWinPanelItem = (tabInfo, index) => {
        const {itemsPerRow} = this.state
        let lastStyle = null;
        if (index == itemsPerRow - 1) {
            lastStyle = styles.winPanelItemLast;
        }
        return (
            <View style={[styles.winPanelItem,{width:Util.getScreenWidth()/itemsPerRow},lastStyle]}>
                <Image style={styles.panelItemIcon} source={tabInfo.icon}/>
                <Text style={styles.panelItemName}>{tabInfo.name}</Text>
            </View>
        );
    }

    genWinPanelUI(info, index) {
        const {itemsPerRow} = this.state
        return (
            <WinPanel key={`active-panel-item-${index}`} title={info.title}>
                <GridView removeClippedSubviews={false} itemsPerRow={itemsPerRow} groupStyle={styles.gridViewGrop}
                          items={info.tabs}
                          renderItem={this.genWinPanelItem}/>
            </WinPanel>
        );
    }

    render() {
        const infoList = [
            {
                title: '线下活动',
                tabs: [
                    {
                        name: '逛街',
                        icon: require('../../images/yaoyue/square_down_shopping.png')
                    },
                    {
                        name: '美食',
                        icon: require('../../images/yaoyue/square_down_food.png')
                    },
                    {
                        name: '观影',
                        icon: require('../../images/yaoyue/square_down_movie.png')
                    },
                    {
                        name: '公关',
                        icon: require('../../images/yaoyue/square_down_pr.png')
                    },
                    {
                        name: '按摩',
                        icon: require('../../images/yaoyue/square_down_anmo.png')
                    },
                ]
            }, {
                title: '游戏陪玩',
                tabs: [
                    {
                        name: '王者荣耀',
                        icon: require('../../images/yaoyue/square_play_wangzhe.png')
                    },
                    {
                        name: '绝地求生',
                        icon: require('../../images/yaoyue/square_play_juedi.png')
                    },
                ]
            },{
                title: '线上聊天',
                tabs: [
                    {
                        name: '声优聊天',
                        icon: require('../../images/yaoyue/square_online_chat.png')
                    },
                    {
                        name: '叫醒',
                        icon: require('../../images/yaoyue/square_online_alert.png')
                    },
                ]
            },

        ];
        return (
            <ScrollView style={styles.container}>
                {infoList.map((info, index) => this.genWinPanelUI(info, index))}
            </ScrollView>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EBEBEB',
    },

    gridViewGrop: {
        justifyContent: 'flex-start',

    },
    winPanelItem: {
        height: 90,
        alignItems: 'center',
        justifyContent: 'center',
        borderRightWidth: Util.getRealPixel(1),
        borderBottomWidth: Util.getRealPixel(1),
        borderColor: '#E6E6E6'
    },
    winPanelItemLast: {
        borderRightWidth: 0,
    },
    panelItemIcon: {
        width: 30,
        height: 30,
        resizeMode: 'contain',
    },
    panelItemName: {
        fontSize: 12,
        marginTop: 10,
    },
});

export default MainYaoYueGuangChangScene;